<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
// import { findLoginAPI } from '@/apis/user.js'
import { useUserStore } from '@/stores/userStore.js'

const userStore = useUserStore()
// 1.整个用于提交的form数据对象
const formModel = ref({
  account: 'demo',
  password: 'hm#qd@23!',
  agree: true // 默认打勾
})

// 2.准备规则对象
const rules = {
  account: [
    {required: true, message: '用户名不能为空', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {min: 6, max: 14, message: '密码必须是6-14位的非空字符', trigger: 'blur'}
  ],
  agree: [
    {
      // validator是自定义校验规则
      validator: (rule,value,callback) => {
        // console.log(value)
        // 自定义校验逻辑
        // 勾选就通过 不勾选不通过
        if(value) {
          callback()
        } else {
          callback(new Error('请勾选登录协议'))
        }
      },
      trigger: 'change'
    }
  ]
}

// 3.获取form实例做统一校验
const formRef = ref(null)
const router = useRouter()
const dologin = async () => {
  await formRef.value.validate()
  //const res = await userLoginService(formModel.value)
  //userStore.setToken(res.data.token) // 存储token
  
  //const res = await findLoginAPI(formModel.value)
  await userStore.getUserInfo(formModel.value) // 存储Pinia
  //console.log('开始登录请求', res)
  ElMessage.success('登录成功')
  // 跳转到后台首页
  router.push('/')
}

// 点击切换Tab
const activeIndex = ref(0)
const getTab = (index) => {
  console.log('索引',index)
  activeIndex.value = index
}
</script>

<template>
  <div class="app-login">
    <header class="header-login">
      <div class="container">
        <h1 class="logo">
          <RouterLink to="/">小兔鲜</RouterLink>
        </h1>
        <span class="wel">欢迎登录</span>
        <RouterLink class="entry" to="/">
           进入网站首页
           <i class="iconfont icon-angle-right"></i>
           <i class="iconfont icon-angle-right"></i>
        </RouterLink>
      </div>
    </header>
    <section class="login-section">
      <div class="container">
        <div class="login-group">
          <div class="login-tab">
            <ul>
              <li class="qr" v-show="activeIndex===0" @click="getTab(1)">
                <i class="iconfont icon-phone"></i>
                <span>扫描登录</span>
              </li>
              <li class="ms" v-show="activeIndex===1" @click="getTab(0)">
                <i class="iconfont icon-user"></i>
                <span>账户登录</span>
              </li>
            </ul>
          </div>
          <div class="tab-content">
            <div v-show="activeIndex===0" class="tab-pane">
              <div class="title">账户登录</div>
              <div class="form-group">
                <el-form :model="formModel" :rules="rules" ref="formRef" size="large" autocomplete="off">
                  <el-form-item prop="account">
                    <el-input v-model="formModel.account" :prefix-icon="User" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="formModel.password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
                  </el-form-item>
                  <el-form-item class="flex mb-10" prop="agree">
                    <div class="flex">
                      <el-checkbox size="large" v-model="formModel.agree">我已同意</el-checkbox>
                      <span class="agr">《隐私条款》</span>和<span class="agr">《服务条款》</span>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="dologin" class="button" type="primary" auto-insert-space>登录</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div v-show="activeIndex===1" class="tab-pane">
              <div class="title">手机扫描登录</div>
              <div class="code-wrap">
                <img src="@/assets/images/qrcode.jpg" />
              </div>
              <p class="tips">使用<a href="javasceipt:;">小兔鲜App</a>扫码登录</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer class="login-footer">
      <div class="container">
        <p>
          <RouterLink to="javascript:;">关于我们</RouterLink>
          <RouterLink to="javascript:;">帮助中心</RouterLink>
          <RouterLink to="javascript:;">售后服务</RouterLink>
          <RouterLink to="javascript:;">配送与验收</RouterLink>
          <RouterLink to="javascript:;">商务合作</RouterLink>
          <RouterLink to="javascript:;">搜索推荐</RouterLink>
          <RouterLink to="javascript:;">友情链接</RouterLink>
        </p>
        <p>CopyRight © 小兔鲜儿</p>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.header-login{
  background-color: #fff;
  border: 1px solid #e4e4e4;
  .container{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .logo{
    width: 200px;
    a{
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url(@/assets/images/logo.png) no-repeat center 18px/contain;
      transition: auto;
    }
  }
  .wel{
    flex: 1;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 38px;
    margin-left: 20px;
    color: #666;
  }
  .entry{
    width: 120px;
    margin-bottom: 38px;
    font-size: 16px;
    i{
      font-size: 14px;
      color: $xtxColor;
      letter-spacing: -5px;
    }
  }
}
.login-section{
  width: 100%;
  min-height: 488px;
  padding: 30px 0;
  position: relative;
  background-color: #f4f4f4;
  background-image: url(@/assets/images/login-bg.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 60px;
  .login-group{
    width: 384px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    margin-left: auto;
    margin-right: 0;
    .title{
      font-size: 18px;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
    .form-group{
      padding: 20px 40px 40px;
      :deep() {
        .el-button{
          width: 100%;
          height: 48px;
          line-height: 48px;
          font-size: 16px;
        }
      }
      .mb-10{
        margin-top: -15px;
      }
    }
    .code-wrap{
      width: 200px;
      height: 200px;
      border-radius: 5px;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
      padding: 10px;
      margin: 10px auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .tips{
      font-size: 14px;
      color: #999;
      text-align: center;
      padding-bottom: 60px;
      a{
        font-size: 16px;
        color: $xtxColor;
      }
    }
  }
  .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .login-tab{
    width: 100%;
    li{
      width: 60px;
      height: 60px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      i{
        font-size: 60px;
        color: #000;
        display: block;
        margin-top: -12px;
        margin-left: 2px;
      }
      span{
        display: none;
      }
      &::before{
        content: '';
        width: 0;
        height: 0;
        border-left: 60px solid transparent;
        border-bottom: 60px solid #fff;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      &.qr{
        background-image: url(@/assets/images/qr-login.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        &:before,& i{
          display: none;
        }
      }
      &.ms{
        background-image: url(@/assets/images/ms-login.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        &:before,& i{
          display: none;
        }
      }
    }
  }
}
.login-footer{
  background-color: #fff;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  color: #999;
  font-size: 14px;
  p{
    line-height: 1;
    margin-bottom: 20px;
  }
  a{
    color: #999;
    line-height: 1;
    padding: 0 10px;
    border-right: 1px solid #999;
    &:hover{
      color: $xtxColor;
    }
  }
  a:last-child{
    border-right: none;
  }
}
</style>